<template>
    <div>
        <div class="flex">
            <div class="e-flex-1">
                <div class="container">
                    <div class="admin-index" v-if="loading == false">
                        <div class="e-p-b-30" style="font-size: 18px;">财务统计</div>
                        <div class="e-m-t-15 e-m-b-45">
                            <el-radio-group v-model="dataType">
                                <el-radio-button label="0">收入支出汇总图</el-radio-button>
                                <el-radio-button label="1">入库支出</el-radio-button>
                                <el-radio-button label="2">出库销售汇总</el-radio-button>
                                <el-radio-button label="3">提现金额情况汇总</el-radio-button>
                                <el-radio-button label="4">推广支出情况</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="e-p-b-15">
                            <el-form ref="form" :model="form" label-width="auto"
                                style="border-bottom: 1px solid var(--light);">
                                <el-form-item label="时间范围">
                                    <el-radio-group v-model="form.timeType" size="small" @input="getAll">
                                        <!-- <el-radio-button label="0">全部</el-radio-button> -->
                                        <el-radio-button label="1">今日</el-radio-button>
                                        <el-radio-button label="2">昨日</el-radio-button>
                                        <el-radio-button label="3">本月</el-radio-button>
                                        <el-radio-button label="4">上月</el-radio-button>
                                        <el-radio-button label="5">本季度</el-radio-button>
                                        <el-radio-button label="6">上季度</el-radio-button>
                                        <el-radio-button label="7">本年</el-radio-button>
                                        <el-radio-button label="8">上年</el-radio-button>
                                        <el-radio-button label="9">自定义日期</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="自定义日期" v-if="form.timeType == 9">
                                    <el-date-picker size="small" v-model="form.date" type="daterange"
                                        range-separator="至" start-placeholder="开始日期" :unlink-panels="true"
                                        end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setTime"
                                        :picker-options="expireTimeOPtion">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="section">
                            <div class="flex">
                                <div class="e-flex-1">
                                    <div class="grid-content e-m-r-15">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>平台利润</span></div>
                                        </div>
                                        <div class="profit-box">
                                            <div class="hd">
                                                <div class="num">{{ (all.incomeandexpend.income - all.incomeandexpend.expend).toFixed(2) }}</div>
                                                <div>利润总额</div>
                                            </div>
                                            <div class="bd">
                                                <div class="flex">
                                                    <div class="e-flex-1">收入：</div>
                                                    <div>{{ all.incomeandexpend.income.toFixed(2) }}元</div>
                                                </div>
                                                <div class="flex">
                                                    <div class="e-flex-1">支出：</div>
                                                    <div>{{ all.incomeandexpend.expend.toFixed(2) }}元</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="e-flex-2">
                                    <div class="grid-content">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>收入与支出</span></div>
                                        </div>

                                        <income-expend :id="'income'" :data="all.inoutline"></income-expend>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section">
                            <div class="flex">
                                <div class="e-flex-1">
                                    <div class="grid-content e-m-r-15">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>小哥完成用户单数排行</span></div>
                                        </div>
                                        <!-- 小哥完成用户单数排行 -->
                                        <order-number :id="'order-number'" :data="all.ordercount"></order-number>
                                    </div>
                                </div>
                                <div class="e-flex-1">
                                    <div class="grid-content e-m-r-15">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>小哥订单金额排行</span></div>
                                        </div>
                                        <!-- 小哥订单金额排行 -->
                                        <order-amount :id="'order-amount'" :data="all.orderamount"></order-amount>
                                    </div>
                                </div>
                                <div class="e-flex-1">
                                    <div class="grid-content">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>银行账户核账记录</span></div>
                                        </div>
                                        <!-- 银行账户核账记录 -->
                                        <check-record :id="'check-record'" :data="all.accountinout"></check-record>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import incomeExpend from './components/income-expend.vue'
import orderNumber from './components/order-number.vue'
import orderAmount from './components/order-amount.vue'
import checkRecord from './components/check-record.vue'

export default {
    layout: 'admin',
    components: {
        incomeExpend,
        orderNumber,
        orderAmount,
        checkRecord
    },
    data() {
        return {
            dataType:0,
            loading: true,
            form: {
                timeType: 1,
                date: [],
            },
            all: {
                incomeandexpend: {
                    income: 0,
                    expend: 0
                },
                ordercount: [],
                orderamount: [],
                accountinout: [],
                inoutline: []
            },
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的 
                }
            }
        }
    },
    head() {
        return {
            title: '首页' ,
        }
    },
    computed: {

    },
    mounted() {
        this.getAll()
    },
    watch:{
        dataType(val){
            console.log(val)
            if(val == 0){
                this.$router.push({
					path:'/finance/statistics'
				})
            }else if(val == 1){
                this.$router.push({
					path:'/finance/receipt/receipt'
				})
            }else if(val ==2){
                this.$router.push({
					path:'/finance/receipt/outbound'
				})
            }else if(val == 3){
                this.$router.push({
					path:'/finance/receipt/cash'
				})
            } else if (val == 4) {
                this.$router.push({
                    path: '/finance/receipt/promotion'
                })
            }
        }
    },
    methods: {
        
        setTime(e) {
            console.log(this.form.date)
            this.getAll()
        },
        getAll() {
            this.loading = true
            let form = {
                timeType: this.form.timeType
            }
            console.log(this.form.date)
            if (this.form.date !== null) {
                if (this.form.date.length > 0) {
                    form.start = this.form.date[0]
                    form.end = this.form.date[1]
                }
            }

            this.$axios.post('/Admin/FinanceStatistics/All', form).then((res) => {
                this.all = res
                console.log(res)
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: auto;
}

.admin-index {
    .section {
        &+.section {
            margin-top: 15px;
        }

        .section-head {
            display: flex;
            align-items: center;

            .blue-span {
                background-color: var(--blue);
                width: 3px;
                height: 14px;
                display: inline-block;
                margin-right: 15px;
            }
        }
    }

    .tips-box {
        padding: 15px;

        .title {
            font-size: 20px;
            margin-bottom: 30px;
        }

        dl {
            dt {
                font-size: 14px;
                margin-bottom: 15px;

                &:before {
                    content: '';
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    background-color: #e4e4e4;
                    border-radius: 10px;
                    margin-right: 12px;
                }
            }

            dd {
                font-size: 14px;
                color: var(--grey);
                margin-left: 22px;
            }
        }
    }

    .upload-demo {
        width: 100%;

        .el-upload-dragger {
            width: 100%;
        }
    }

    .grid-content {
        background-color: #fff;
        padding: 15px;
        height: calc(100% - 30px);
        border: 1px solid var(--light);
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .admin-statistics-content {
        display: flex;

        .item {
            &+.item {
                border-left: 1px solid var(--light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
}

// 平台利润
.profit-box {
    height: 90%;
    display: flex;
    flex-direction: column;

    .hd {
        text-align: center;
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 2px solid var(--light);
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .num {
            font-size: 50px;
            color: var(--yellow);
        }
    }

    .bd {
        .flex {
            padding-bottom: 15px;
            color: var(--grey);
        }
    }
}
</style>
